<template>
	<view class="pageBg">
		<Head title="关键字搜索" type="search" :isBack="false" @handleSearch="handleIptSearch"></Head>
		<view class="main">
			<!-- #ifdef MP-TOUTIAO || MP-ALIPAY -->
			<!-- 搜索框 -->
			<view class="search">
				<u-search height="70rpx" @search="handleIptSearch" @custom="handleIptSearch" :placeholder="placeholder"
					v-model="keyword" :input-style="{color:'#838383',fontSize:'14px',padding:'8rpx 0'}" bg-color="#fff"
					:action-style="actionStyle"></u-search>
			</view>
			<!-- #endif -->
			<!-- 搜索框 -->
			<!-- 历史记录 -->
			<view class="historyBox">
				<view class="historyTitle">
					<view class="text">历史搜索</view>
					<view class="del" v-if="history.length>0" @click="clearHistoryModal = true"></view>
				</view>
				<view class="historyList" v-if="history.length>0">
					<view class="item" @click="doSearchByKeyword(item)" v-for="(item,index) in history" :key="index">
						{{item}}</view>
				</view>
				<Empty v-else></Empty>
			</view>
			<!-- 历史记录 -->

			<!-- 热门职位 -->
			<view class="hotJob" v-if="type == 'job'">
				<view class="hotJobTitle">热门职位</view>
				<view class="hotJobList">
					<view class="item" @click="doSearchByKeyword(item.word)" v-for="(item,index) in hotwordlist"
						:key="index">{{item.word}}</view>
				</view>
			</view>
			<!-- 热门职位 -->
		</view>

		<u-popup v-model="clearHistoryModal" :mask-custom-style="maskCustomStyle" mode="center" length="600"
			border-radius="14">
			<view class="delPopup">
				<view class="delTitle">提示</view>
				<view class="delContent">确定清空搜索记录吗?</view>
				<view class="delBtns u-border-top">
					<view class="btn" @click="clearHistoryModal = false">取消</view>
					<view class="btn confirm" @click="handleDelHistory">确认</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	import http from '@/utils/http'
	import api from '@/api'
	import {
		onShareAppMessage,
		onShareTimeline
	} from '@/utils/share.js'
	export default {
		data() {
			return {
				clearHistoryModal: false,
				type: 'job',
				keyword: '',
				history_key: '',
				history: [],
				hotwordlist: [],
				actionStyle: {
					background: 'linear-gradient(45deg, #1360FF, #3C7CFF)',
					color: '#fff',
					padding: '16rpx 30rpx',
					borderRadius: '36rpx',
					width: '124rpx',
					marginLeft: '20rpx',
					fontSize: '15px'
				},
				maskCustomStyle: {
					background: 'rgba(38, 38, 38,.1)',
					backdropFilter: 'blur(5px)'
				},
				placeholder: ''
			}
		},
		onPageScroll(res) {
			uni.$emit('onPageScroll', res.scrollTop)
		},
		onShow() {
			if (this.history_key) {
				this.initHistory()
			}
		},
		onLoad(options) {
			this.type = options.type
			this.init()
		},
		onShareAppMessage() {
			return onShareAppMessage({
				url: '/commonViews/SearchIndex',
				alias: "searchIndex",
				info: {}
			})
		},
		onShareTimeline() {
			// info.imgUrl = this.info.thumb
			return onShareTimeline({
				url: '/commonViews/SearchIndex',
				alias: "searchIndex",
				info: {}
			})
		},
		mounted() {
			// this.type = this.$Route.query.type
		},
		created() {
			switch (uni.getSystemInfoSync().platform) {
				case 'android':
					this.$set(this.maskCustomStyle, 'background', 'rgba(38, 38, 38,.1)')
					break;
				case 'ios':
					this.$set(this.maskCustomStyle, 'background', 'rgba(68, 68,68,0.65)')
					break;
				default:
					break;
			}
		},
		methods: {
			init() {
				this.history_key = 'serach_history_' + this.type
				switch (this.type) {
					case 'job':
						this.placeholder = '请输入职位关键词'
						this.initHotword()
						break;
					case 'resume':
						this.placeholder = '请输入人才关键词'
						break;
					case 'company':
						this.placeholder = '请输入企业关键词'
						break;
					default:
						break;
				}
				this.initHistory()
			},
			doSearchByKeyword(keyword) {
				this.keyword = keyword
				this.updateHistory(this.keyword)
				uni.navigateTo({
					url: `/commonViews/SearchShow?keyword=${this.keyword}&type=${this.type}&history_key=${this.history_key}`
				})
			},
			// 获取热门职位
			initHotword() {
				http
					.get(api.hotwordlist, {
						limit: 30
					})
					.then(res => {
						this.hotwordlist = [...res.data.data.items]
					})
					.catch(() => {})
			},
			// 文本框搜索
			handleIptSearch(keyword) {
				var val = keyword || this.keyword
				this.keyword = val
				this.updateHistory(this.keyword)
				uni.navigateTo({
					url: `/commonViews/SearchShow?keyword=${this.keyword}&type=${this.type}&history_key=${this.history_key}`
				})
				this.keyword = ''
			},
			// 获取历史记录列表
			initHistory() {
				let list = uni.getStorageSync(this.history_key)
				list = list != '' ? JSON.parse(list) : null
				if (list === null) {
					this.history = []
				} else {
					this.history = [...list]
				}
			},
			// 搜索记录
			updateHistory(keyword) {
				if (keyword === '') {
					return
				}
				let arr = []
				let list = uni.getStorageSync(this.history_key)
				arr = list != '' ? JSON.parse(list) : null
				arr = arr === null ? [] : arr
				arr.unshift(keyword)

				let uniqueSet = new Set(arr)
				let historyArr = [...uniqueSet]
				if (historyArr.length > 15) {
					historyArr.pop()
				}
				uni.setStorageSync(this.history_key, JSON.stringify(historyArr))
				this.history = historyArr
			},
			// 删除历史记录
			handleDelHistory() {
				uni.setStorageSync(this.history_key, null)
				this.history = []
				this.clearHistoryModal = false
			}
		}
	}
</script>
<style lang="scss" scoped>
	.main {
		margin: 0rpx 30rpx;
		padding-top: 30rpx;
	}

	.search {
		margin-bottom: 30rpx;
	}

	.historyBox {
		background: #FFFFFF;
		border-radius: 14rpx;
		padding: 28rpx 27rpx 26rpx 39rpx;

		.historyTitle {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 30rpx;
			font-weight: bold;

			.text {
				color: #2A2A2A;
				font-size: 36rpx;
			}

			.del {
				width: 28rpx;
				height: 31rpx;
				background: url('../static/img/del.png') no-repeat center center;
				background-size: 100% 100%;
			}
		}

		.historyList {
			display: flex;
			flex-wrap: wrap;

			.item {
				margin-right: 20rpx;
				margin-bottom: 20rpx;
				color: #8A8A8A;
				font-size: 26rpx;
				padding: 12rpx 16rpx;
				background: rgba(150, 150, 150, 0.06);
			}
		}
	}

	.hotJob {
		margin-top: 22rpx;
		background: #FFFFFF;
		border-radius: 14rpx;
		padding: 28rpx 27rpx 26rpx 39rpx;

		.hotJobTitle {
			color: #2A2A2A;
			font-size: 36rpx;
			margin-bottom: 30rpx;
			font-weight: bold;
		}

		.hotJobList {
			display: flex;
			flex-wrap: wrap;

			.item {
				margin-right: 20rpx;
				margin-bottom: 20rpx;
				color: #8A8A8A;
				font-size: 26rpx;
				padding: 12rpx 16rpx;
				background: rgba(150, 150, 150, 0.06);
			}
		}
	}

	.delPopup {
		height: auto;
		overflow: hidden;
		font-size: 32rpx;
		background-color: #fff;

		.delTitle {
			padding-top: 48rpx;
			font-weight: 500;
			text-align: center;
			// color: $u-main-color;
		}

		.delContent {
			padding: 48rpx;
			font-size: 30rpx;
			text-align: center;
			// color: $u-content-color;
		}

		.delBtns {
			display: flex;
			flex-direction: row;

			.btn {
				flex: 1;
				height: 100rpx;
				line-height: 100rpx;
				font-size: 32rpx;
				box-sizing: border-box;
				cursor: pointer;
				text-align: center;
				border-radius: 4rpx;

				&.confirm {
					color: rgb(41, 121, 255);
				}
			}
		}
	}
</style>